<template>
  <div style="background-color: white;">
    <div style="margin-left: 10px;">
      <el-button type="primary"  @click="isShowAddLink=!isShowAddLink">新增友链</el-button>
      <el-form style="margin-top: 40px" class="demo-form-inline" v-if="isShowAddLink">
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="友链名称">
              <el-input style="width: 500px"
                        placeholder="请输入内容"
                        v-model="link.linkName"
                        clearable>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="博客网址">
              <el-input style="width: 500px"
                        placeholder="请输入内容"
                        v-model="link.webUrl"
                        clearable>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="图标地址">
              <el-input style="width: 500px"
                        placeholder="请输入内容"
                        v-model="link.webIcon"
                        clearable>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="友链描述">
              <el-input style="width: 500px"
                        placeholder="请输入内容"
                        v-model="link.description"
                        clearable>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button
              type="success"
              size="mini"
              @click="addLink()">提交
          </el-button>
        </el-form-item>
      </el-form>

      <el-table
          :data="pageInfo"
          style="width: 1400px"
          :stripe=true
          :border=true
          height="500">
        <el-table-column
            prop="linkName"
            label="友链名称"
            width="200">
        </el-table-column>
        <el-table-column
            prop="webUrl"
            label="博客网址"
            width="200">
        </el-table-column>
        <el-table-column
            prop="webIcon"
            label="图标地址"
            width="200">
        </el-table-column>
        <el-table-column
            prop="description"
            label="友链描述"
            width="200">
        </el-table-column>
        <el-table-column
            label="创建时间"
            width="250">
          <template slot-scope="scope">
            <span>{{ makeDate(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
                type="success"
                size="mini"
                @click="showUpdate(scope.row.id,scope.row.txt)">编辑（未做）
            </el-button>
            <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
            @change="changeStatus(scope.row.id,scope.row.status)">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>

<!--      <div style="float: right">-->
<!--        <el-pagination-->
<!--            background-->
<!--            layout="prev, pager, next"-->
<!--            :total="pageInfo.total"-->
<!--            :page-size="pageInfo.pageSize"-->
<!--            @current-change="handlePage"-->
<!--        >-->
<!--        </el-pagination>-->
<!--      </div>-->
      <!--弹框-->
<!--      <el-dialog title="修改更新日志" :visible.sync="isUpdate" center>-->
<!--        <el-form :inline="true">-->
<!--          <el-form-item label="修改内容" prop="region">-->
<!--            <el-input v-model="updateValue"  placeholder="updateValue" clearable style="width: 500px"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--        <div slot="footer" class="dialog-footer">-->
<!--          <el-button @click="isUpdate = false">取 消</el-button>-->
<!--          <el-button type="primary" @click="isAddClassify = saveOrUpdateDiray(id,updateValue)">更改</el-button>-->
<!--        </div>-->
<!--      </el-dialog>-->
    </div>
  </div>
</template>
<script>
import {makeDate} from "../../assets/js/dateformat"

export default {
name: "linkManagement",
  data() {
    return {
      isShowAddLink:false,
      link :{
        linkName:'',
        webUrl:'',
        webIcon:'',
        description:'',
      },
      pageInfo:[]
    }
  },
  methods: {
    addLink(){
      this.$ajax.post(this.$config.url+`/ljblog/Link/saveOrUpdate`,this.link)
      .then(res=>{
        if(res.data.status===this.$config.request_code_success){
          //保存成功
          this.$message.success("新增成功")
          this.getLinks();
        }else{
          this.$message.error(res.data.message)
        }
      })
    },
    getLinks(){
      this.$ajax.post(this.$config.url + `/ljblog/Link/getLinks`,{})
          .then(res => {
            if (res.data.status === this.$config.request_code_success) {
              //保存成功
              this.pageInfo=res.data.data;
            }
          })
    },
    changeStatus(id,oldStatus){
      console.log(oldStatus);
      if(!(oldStatus==='1'||oldStatus==='0')){
        this.$message.error("状态码不是规定的状态码")
        return false;
      }
      this.$ajax.post(this.$config.url+`/ljblog/Link/saveOrUpdate`,
          {
            "id":id,
            "status":oldStatus
          }).then(res=>{
        if (res.data.status === this.$config.request_code_success) {
          //保存成功
          this.$message.success("修改成功")
        }else{
          //出错
          this.$message.error("出错了")
        }
      })
    },
    makeDate(date) {
      return makeDate(date);
    },
    showUpdate(){

    }
  },
  created() {
      this.getLinks();
  }
}
</script>

<style scoped>

</style>